<template>
  <div style="height: 60vh; width: 50vw">
    <VueFlow v-model:nodes="nodes" v-model:edges="edges" @connect="onConnect"> </VueFlow>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Panel, useVueFlow, VueFlow } from '@vue-flow/core';

const nodes = ref([]);
const edges = ref([]);

const instance = useVueFlow();
const { addEdges, onEdgeUpdateEnd, applyEdgeChanges, fitView, applyNodeChanges } = instance;

// 初始化线性布局的节点
const initLinearFlow = () => {
  const initialNodes = Array.from({ length: 5 }, (v, i) => ({
    id: `node-${i}`,
    position: { x: 0, y: i * 100 }, // 初始竖直排列
    data: { label: `Node ${i}` },
    expandParent: true,
    // style: { background: 'transparent' },
    connectable: true,
  }));
  nodes.value = initialNodes;

  for (let i = 2; i < 4; i++) {
    nodes.value[i].parentNode = 'node-1';
  }
};

const onConnect = (a, b, c) => {
  console.log('onConnect', a, b, c);
  a.zIndex = 100000;
  addEdges(a);
};

onMounted(() => {
  // 初始化数据
  initLinearFlow();
});
</script>
